<template>
  <div class="rim">
    <div class="content">
      <div id="container"></div>
      <div class="poi_list">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="景点" name="风景名胜">
            <div class="Attractionslist">
              <ol>
                <li v-for="(item,index) in Attractions" :key="index" @mouseover="findfun(item)">
                  <span class="Attractions">{{item.name}}</span>
                  {{item.distance}}公里
                  <span></span>
                </li>
              </ol>
            </div>
          </el-tab-pane>
          <el-tab-pane label="交通" name="公交车站">
            <div class="Attractionslist">
              <ol>
                <li
                  v-for="(item,index) in Attractions"
                  :key="index"
                  @mouseover="findfun(item)"
                >
                  <span class="Attractions">{{item.name}}</span>
                  {{item.distance}}公里
                  <span></span>
                </li>
              </ol>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["coordinate", "cityName"],
  async mounted() {
      
      
    if (!window.AMap) {
      window.onLoad = () => {
        this.init();
      };
      var url =
        "https://webapi.amap.com/maps?v=1.4.15&key=e675bc092033152edcae39a7a735cdfe&callback=onLoad";
      var jsapi = document.createElement("script");
      jsapi.charset = "utf-8";
      jsapi.src = url;
      document.head.appendChild(jsapi);
    } else {
      this.init();
    }
  },
  data() {
    return {
      activeName: "风景名胜",
      Attractions: [],
      traffic: [],
      distance: [],
      map: null,
      marker:[],
      infoWindow:[]
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name === "风景名胜") {
        this.search(tab.name, this.map);
      } else if (tab.name === "公交车站") {
        this.search(tab.name, this.map);
      }
    },
    async init() {
      var map;
      this.map = map = new AMap.Map("container", { resizeEnable: true });
      map.setZoomAndCenter(15, [
        this.coordinate.longitude,
        this.coordinate.latitude
      ]);
      this.search("风景名胜", map);
    },
    search(type, map) {
      let th = this;
      this.map.clearMap();
      //周边搜索
      AMap.service(["AMap.PlaceSearch"], function() {
        //构造地点查询类

        var placeSearch = new AMap.PlaceSearch({
          type: type, // 兴趣点类别
          city: th.cityName, // 兴趣点城市
          citylimit: true, //是否强制限制在设置的城市内搜索
          pageSize: 10,
          title: "",
          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });

        var cpoint = [th.coordinate.longitude, th.coordinate.latitude]; //中心点坐标
        placeSearch.searchNearBy("", cpoint, 3000, function(status, result) {
            console.log(result);
          th.Attractions = result.poiList.pois;
          th.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
 
          th.Attractions.forEach(function(currvlaue, index) {
            currvlaue.distance = (currvlaue.distance / 1000).toFixed(2);
            th.marker = new AMap.Marker({
              position: currvlaue.location,
              title: currvlaue.name,
              map:th.map
            });
            th.marker.content = currvlaue.name;
            th.marker.on('mouseover', mouseoverfun);
             function mouseoverfun(e){
                 map.setZoomAndCenter(14, [
                currvlaue.location.R,
                currvlaue.location.Q
              ]);
                 th.infoWindow.setContent(e.target.content);
                  th.infoWindow.open(map, e.target.getPosition());
             }
          
            // 鼠标移入标记点事件
            // AMap.event.addListener(marker[index], "mousemove", function(e) {
            //     //设置地图中心点
            //   
            //   marker[index].setLabel({
            //     offset: new AMap.Pixel(20, 20
            //     ), //设置文本标注偏移量
            //     content: `<div class='info'>${currvlaue.name}</div>`, //设置文本标注内容
            //     direction: "right" //设置文本标注方位
            //   });
            // });
            // // 鼠标移出标记点事件
            // AMap.event.addListener(marker[index], "mouseout", function(e) {
            //   marker[index].setLabel({
            //     content: "" //设置文本标注内容
            //   });
            // });
          });
          map.setFitView();
        });
      });
    },
    findfun(item) {
       
      this.map.setZoomAndCenter(14, [item.location.R, item.location.Q]);
        //   this.map.setCenter(this.mapTitle[this.currentIndex].location[index].locationArr)
                this.infoWindow.setContent(item.name)
                this.infoWindow.open(this.map,[item.location.R, item.location.Q])
    }
  }
};
</script>

<style lang="less" scoped>
.rim {
  margin: 40px 0;
  .content {
    display: flex;
    height: 360px;
    #container {
      width: 65%;
      height: 100%;
    }
    .poi_list {
      flex: 1;
      background-color: #fff;
      padding-left: 20px;
      .el-tab-pane {
        font-size: 15px;
        .Attractionslist {
          height: 300px;
          overflow: auto;
          font-size: 14px;
          color: #666;
          ol {
            list-style: none;
            li {
              cursor: pointer;
              display: flex;
              margin: 0 20px 20px 10px;
              .Attractions {
                flex: 1;
              }
            }
          }
        }
      }
    }
  }
}
</style>